import { useState,useEffect } from 'react'
import Home from './Home';
import Topic from './Topic';
// import {BrowserRouter,Route,Switch} from 'react-router-dom';
import './App.css';
import {
  Route,
  Switch,
  BrowserRouter as Router,
} from 'react-router-dom'
import Bottom from './Bottom';
import Table from './Table';

const style = {
  height: 100,
  background: '#ccc',
  textAlign: 'center',
  lineHeight: '100px'
}

const App = ()=>{
  return (
    <Router>
      <Route exact path='/'>
        <Home />
      </Route>
      <Route path='/table'>
        <Table />
      </Route>
      <Route path='/topic/:id'>
        <Topic />
      </Route>
    </Router>
  )
}

// 函数组件
// const App = ()=>{
//   // 实现点击按钮+1
//   const [count,setCount] = useState(0);
//   const [count2,setCount2] = useState(0);

//   const add = ()=>setCount(count+1);
  
//   useEffect(()=>{
//     // let timer = setInterval(()=>{
//     //   setCount2(count=>count+1);
//     // },2000)
//     // return ()=>{
//     //   clearInterval(timer)
//     // }
//   },[])
//   return (
//     <div className="App">
//       <Home />
//       <h2>count:{count}</h2>
//       <button onClick={()=>setCount(count+1)}>+1</button>
//       <button onClick={add}>+1</button>

//       <h2>count2:{count2}</h2>
//     </div>
//   );
// }

export default App;
